<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import { onBeforeMount, ref, shallowRef, watch } from "vue";
import type { DefaultOptionType } from "ant-design-vue/es/vc-select/Select";
import { useStorage } from "@vueuse/core";
import Grid from "@/components/framework/grid.vue";
import { copyText } from "@/util/clipboard.ts";

const fonts = shallowRef<DefaultOptionType[]>([]);
const input = ref("So Hot");
const font = useStorage("ascii-text-drawer.font", "Standard");
const width = useStorage("ascii-text-drawer.width", 80);
const output = ref("");

const generate = async () => {
  output.value = await native.ipc.invokeNode("figlet.default.text", input.value, {
    font: font.value,
    width: width.value,
    whitespaceBreak: true,
  });
};

onBeforeMount(async () => {
  const fontList: string[] = await native.ipc.invokeNode("figlet.default.fontsSync");
  fonts.value = fontList.map(it => ({ value: it }));

  await generate();
});

watch([input, font, width], () => generate());
</script>

<template>
  <tool-view title="ASCII艺术字生成" description="将字符串编码和解码为其 Base64 格式表示形式">
    <div class="pv-20 full-view">
      <grid rows-preset="two-rows-0">
        <div class="flex col-gap-10 ph-10">
          <a-input v-model:value="input" class="flex-1" allow-clear @keyup.enter="generate" placeholder="请输入要转换的内容" />
          <a-select v-model:value="font" :options="fonts" class="w-200" virtual show-search placeholder="字体"  />
          <a-input-number v-model:value="width" :min="10" class="w-200" placeholder="宽度" />
          <a-button :disabled="!input" @click="generate">生成</a-button>
          <a-button :disabled="!output" @click="copyText(output)">复制</a-button>
        </div>

        <div class="flex-center overflow-auto pt-20">
          <pre class="font-20 select-text">{{ output }}</pre>
        </div>
      </grid>
    </div>
  </tool-view>
</template>

<style scoped lang="less"></style>
